<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery2</title>
    <script src="min_jq/min.js"></script>
    <style>
        #tip{
            margin: 0 auto;
            text-align: center;
            width: 200px;
            border: solid 1px;
            padding:10px 0;
        }
        .red{
            color: red;
        }
        .red_background{
            background-color: red;
        }
        #tip1{
            margin: 0 auto;
            text-align: center;
            width: 200px;
            border: solid 1px;
            padding:10px 0;
        }
    </style>
</head>
<body>
    <div>parent
        <div id="tip">jQuery框架如此强大</div>
        <div>过渡模块</div>
        <div id="tip1">jQuery框架如此强大2</div>
        <div>过渡模块</div>
        <div id="tip2">jQuery框架如此强大3,点我改变字体颜色</div>
        <div id="tip3"></div>
        <div>children</div>

        <div id="parent">我是父元素
            <div>我是前置元素</div>
<!--        1.动态创建一个元素
            2.id为child
            3.内容为我是一个动态元素
            4.红色字体-->
        </div>
    </div>
    <script>
        // 添加指定的类名,并设置一个样式
        $("#tip").addClass("red_background").css("color","blue")
        // 添加指定的类名,并设置多个样式
        $("#tip1").addClass("red_background").css({"color":"blue","font-size":"20px"})
        // 绑定事件,循环切换样式
        $("#tip2").on("click",function (){
            $("#tip2").toggleClass("red")
        })


        // 上一个兄弟元素的文本内容
        console.log($("#tip3").next().text());
        // 下一个兄弟元素的文本内容
        console.log($("#tip3").prev().text());



        // 创建一个div元素
        $div=$("<div></div>");
        $div.attr("id","brother").html("我是个动态元素").css({"color":"red"})
        console.log($div)

        // 添加子元素
        // $("#parent").html($div)
        // 将元素添加为第一个子元素
        // $("#parent").prepend($div)
        // 将元素添加为最后一个子元素
        // $("#parent").append($div)


        // 添加兄弟元素到原元素的后面
        // $("#parent").after($div)
        // 添加兄弟元素到原元素的前面
        $("#parent").before($div)


    </script>
</body>
</html>